<template>
  <div
    class="md-preview"
    :class="{ 'md-preview--dark': isDarkTheme }"
    :style="{ height }"
    ref="previewRef"
    @scroll="handleScroll"
  >
    <div class="md-preview__content" v-html="renderedContent"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, onMounted, nextTick } from 'vue';
import { useMarkdown } from '../../hooks/useMarkdown';
import { useHighlight } from '../../hooks/useHighlight';
import { useTheme } from '../../hooks/useTheme';

interface Props {
  content: string;
  height?: string;
  syncScroll?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  height: '300px',
  syncScroll: true
});

const emit = defineEmits<{
  (e: 'rendered'): void;
  (e: 'scroll', event: Event): void;
}>();

const { currentTheme } = useTheme();
const isDarkTheme = computed(() => currentTheme.value === 'dark');

const { render, renderMermaid } = useMarkdown();
const { highlightElement } = useHighlight();

const previewRef = ref<HTMLDivElement | null>(null);

// 渲染 Markdown 内容
const renderedContent = computed(() => {
  const html = render(props.content || '');
  return html;
});

// 处理滚动
const handleScroll = (event: Event) => {
  emit('scroll', event);
};

// 滚动到指定位置
const scrollTo = (options: ScrollToOptions) => {
  previewRef.value?.scrollTo(options);
};

// 获取滚动位置
const getScrollInfo = () => {
  if (!previewRef.value) return { scrollTop: 0, scrollHeight: 0, clientHeight: 0 };
  
  const { scrollTop, scrollHeight, clientHeight } = previewRef.value;
  return { scrollTop, scrollHeight, clientHeight };
};

// 监听内容变化，应用语法高亮和mermaid渲染
watch(() => renderedContent.value, () => {
  nextTick(async () => {
    if (previewRef.value) {
      highlightElement(previewRef.value);
      await renderMermaid();
      emit('rendered');
    }
  });
});

onMounted(async () => {
  if (previewRef.value) {
    highlightElement(previewRef.value);
    await renderMermaid();
    emit('rendered');
  }
});

// 暴露方法
defineExpose({
  scrollTo,
  getScrollInfo
});
</script>

<style lang="scss" scoped>
.md-preview {
  border: 1px solid var(--md-borderColor, #e0e0e0);
  border-top: none;
  background-color: var(--md-backgroundColor, #ffffff);
  color: var(--md-textColor, #333333);
  overflow-y: auto;
  padding: 16px;
  
  &--dark {
    background-color: var(--md-backgroundColor, #1e1e1e);
    color: var(--md-textColor, #e0e0e0);
  }
  
  &__content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    
    :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
    }
    
    :deep(h1) {
      font-size: 2em;
      border-bottom: 1px solid var(--md-borderColor, #e0e0e0);
      padding-bottom: 0.3em;
    }
    
    :deep(h2) {
      font-size: 1.5em;
      border-bottom: 1px solid var(--md-borderColor, #e0e0e0);
      padding-bottom: 0.3em;
    }
    
    :deep(h3) {
      font-size: 1.25em;
    }
    
    :deep(h4) {
      font-size: 1em;
    }
    
    :deep(h5) {
      font-size: 0.875em;
    }
    
    :deep(h6) {
      font-size: 0.85em;
      color: #6a737d;
    }
    
    :deep(p) {
      margin-top: 0;
      margin-bottom: 16px;
    }
    
    :deep(a) {
      color: var(--md-activeColor, #1890ff);
      text-decoration: none;
      
      &:hover {
        text-decoration: underline;
      }
    }
    
    :deep(ul), :deep(ol) {
      padding-left: 2em;
      margin-top: 0;
      margin-bottom: 16px;
    }
    
    :deep(li) {
      margin-bottom: 4px;
    }
    
    :deep(blockquote) {
      margin: 0 0 16px;
      padding: 0 1em;
      color: #6a737d;
      border-left: 0.25em solid #dfe2e5;
    }
    
    :deep(pre) {
      margin-top: 0;
      margin-bottom: 16px;
      padding: 16px;
      overflow: auto;
      font-size: 85%;
      line-height: 1.45;
      background-color: #f6f8fa;
      border-radius: 3px;
      
      .md-preview--dark & {
        background-color: #2d2d2d;
      }
    }
    
    :deep(code) {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
      padding: 0.2em 0.4em;
      margin: 0;
      font-size: 85%;
      background-color: rgba(27, 31, 35, 0.05);
      border-radius: 3px;
      
      .md-preview--dark & {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
    
    :deep(pre code) {
      padding: 0;
      margin: 0;
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0;
    }
    
    :deep(table) {
      display: block;
      width: 100%;
      overflow: auto;
      margin-top: 0;
      margin-bottom: 16px;
      border-spacing: 0;
      border-collapse: collapse;
    }
    
    :deep(table th) {
      font-weight: 600;
    }
    
    :deep(table th), :deep(table td) {
      padding: 6px 13px;
      border: 1px solid var(--md-borderColor, #e0e0e0);
    }
    
    :deep(table tr) {
      background-color: var(--md-backgroundColor, #ffffff);
      border-top: 1px solid var(--md-borderColor, #e0e0e0);
      
      .md-preview--dark & {
        background-color: var(--md-backgroundColor, #1e1e1e);
      }
    }
    
    :deep(table tr:nth-child(2n)) {
      background-color: #f6f8fa;
      
      .md-preview--dark & {
        background-color: #2d2d2d;
      }
    }
    
    :deep(img) {
      max-width: 100%;
      box-sizing: content-box;
      background-color: var(--md-backgroundColor, #ffffff);
      
      .md-preview--dark & {
        background-color: var(--md-backgroundColor, #1e1e1e);
      }
    }
    
    :deep(hr) {
      height: 0.25em;
      padding: 0;
      margin: 24px 0;
      background-color: #e1e4e8;
      border: 0;
    }
    
    :deep(input[type="checkbox"]) {
      margin-right: 0.5em;
    }
  }
}
</style>